<template>
  <div>
    <el-tag
      v-for="(tag, i) in tablist"
      :key="tag.path"
      :closable="tag.name !== 'home'"
      size="small"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      class="tabs"
      @close="handleClose(tag, i)"
      @click="toRoute(tag)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'ManageTabs',

  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      tablist: 'tablist',
      currentMenu: 'currentMenu',
    }),
  },
  mounted() {},

  methods: {
    handleClose(tag, i) {
      const length = this.tablist.length - 1;
      // this.tablist.splice(i, 1);
      this.$store.commit('tab/deleteTab', tag);
      // this.deleteTab(tag);
      if (tag.name !== this.$route.name) {
        return;
      }
      if (i === length) {
        this.$router.push({ path: this.tablist[i - 1].path });
      } else {
        this.$router.push({ path: this.tablist[i].path });
      }
    },
    toRoute(tag) {
      this.$router.push({ path: tag.path });
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  margin-right: 10px;
  cursor: pointer;
}
</style>
